<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.7/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <h1>先计算勾选数量</h1>
    <table border="1" cellspacing="0" cellpadding="10">
      <thead>
        <tr>
          <th>全选</th>
          <th>商品</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="goods in goodsList" :key="goods.id">
          <td>
            <input type="checkbox" @change="onInputChnage" v-model="goods.checked" />
          </td>
          <td>
            <img :src="'./images/' + goods.img" alt="" width="100" height="100" />
            {{ goods.name }}
          </td>
          <td>
            {{ goods.price }}
          </td>
          <td>
            <button :disabled="goods.num === 0" @click="goods.num--">-</button>
            <input type="number" v-model="goods.num" style="width: 40px;" />
            <button @click="addGoods(goods.id)">+</button>
          </td>
          <td>
            {{ goods.num * goods.price }}
          </td>
          <td>
            <button @click="deleteGoods(goods.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <footer style="display: flex; margin-top: 20px;">
      <button>合计：{{ total }}</button>
      <input type="checkbox" @change="allCheckedInputChange" v-model="allChecked" />
      <label>{{ allChecked ? '非全选' : '全选'  }}</label>
      <button :disabled="!goodsNumTotal" style="margin-left: 20px;">已选择 {{ goodsNumTotal }} 件商品</button>
    </footer>

    <ul style="display: flex; margin-top: 20px;">
      <li v-for="goods in checkedGoodsList">
        <img :src="'./images/' + goods.img" alt="" width="100" height="100" />
      </li>
    </ul>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        allChecked: false,
        title: '添加删除功能',
        goodsList: [{
            name: 'Casio/卡西欧 EX-TR350',
            img: 'Casio-1.jpg',
            price: 1,
            num: 1,
            id: Math.random(),
            checked: false,
          },
          {
            name: 'Canon/佳能 powerShotSX50 HS',
            img: 'Canon-2.jpg',
            price: 2,
            num: 1,
            id: Math.random(),
            checked: false,
          },
          {
            name: 'Sony/索尼 DSC-WX300',
            img: 'Sony-3.jpg',
            price: 3,
            num: 1,
            id: Math.random(),
            checked: false,
          },
          {
            name: 'Fujifi1m/富士 instax mini 25',
            img: 'Fujifi1m-4.jpg',
            price: 4,
            num: 1,
            id: Math.random(),
            checked: false,
          },
          {
            name: '康奈尔ssr-p',
            img: 'ssr-5.jpg',
            price: 5,
            num: 1,
            id: Math.random(),
            checked: false,
          },
        ],
      },

      computed: {
        total() {
          return this.goodsList.reduce(function (total, prev) {
            return total + (prev.checked ? prev.price * prev.num : 0)
          }, 0)
        },

        goodsNumTotal() {
          return this.goodsList.reduce(function (total, prev) {
            return total + Number(prev.checked)
          }, 0)
        },

        checkedGoodsList() {
          return this.goodsList.filter(goods => {
            return goods.checked
          })
        },
      },

      methods: {
        allCheckedInputChange(e) {
          val = e.target.checked
          this.goodsList = this.goodsList.map(goods => {
            return {
              name: goods.name,
              img: goods.img,
              price: goods.price,
              num: goods.num,
              id: goods.id,
              checked: val,
            }
          })
        },

        onInputChnage() {
          this.allChecked = this.goodsList.every(goods => {
            return goods.checked
          })
        },
        deleteGoods(id) {
          const index = this.goodsList.findIndex(function (goods) {
            return goods.id === id
          })
          this.goodsList.splice(index, 1)
        },

        addGoods(id) {
          const index = this.goodsList.findIndex(function (goods) {
            return goods.id === id
          })
          const goods = this.goodsList[index]
          const newGoods = {
            name: goods.name,
            img: goods.img,
            price: goods.price,
            num: goods.num + 1,
            id: goods.id,
            checked: goods.checked,
          }
          this.goodsList.splice(index, 1, newGoods)
        },
      },
    })
  </script>
</body>

</html>